<%--
  Created by IntelliJ IDEA.
  User: LYK
  Date: 2017/5/2
  Time: 11:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
	<title>Title</title>
	<jsp:include page="/static/commonviews/header.jsp"/>
</head>
<body>
<div class="container bs-docs-container">
	<div class="row">
		<!--左侧-->
		<div class="col-md-9" role="main">
			<div class="doc-section">
				<h2 id="overview" class="page-header ">Bootstrap Table</h2>
				<p>基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。</p>
			</div>

			<!--通过html创建table-->
			<div class="doc-section">
				<h3 class="page-header">通过html创建table</h3>
				<table data-toggle="table">
					<thead>
					<tr>
						<th>Name</th>
						<th>Stars</th>
						<th>Forks</th>
						<th>Description</th>
					</tr>
					</thead>
					<tbody>
					<tr id="tr-id-1" class="tr-class-1" data-title="bootstrap table">
						<td id="td-id-1" class="td-class-1" data-title="bootstrap table">
							<a href="https://github.com/wenzhixin/bootstrap-table">bootstrap-table</a>
						</td>
						<td data-value="526">526</td>
						<td data-text="122">122</td>
						<td data-i18n="Description">An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3)
						</td>
					</tr>
					<tr id="tr-id-2" class="tr-class-2">
						<td id="td-id-2" class="td-class-2">
							<a href="https://github.com/wenzhixin/multiple-select">multiple-select</a>
						</td>
						<td>288</td>
						<td>150</td>
						<td>A jQuery plugin to select multiple elements with checkboxes :)
						</td>
					</tr>
					<tr id="tr-id-3" class="tr-class-3">
						<td id="td-id-3" class="td-class-3">
							<a href="https://github.com/wenzhixin/bootstrap-show-password">bootstrap-show-password</a>
						</td>
						<td>32</td>
						<td>11</td>
						<td>Show/hide password plugin for twitter bootstrap.
						</td>
					</tr>
					<tr id="tr-id-4" class="tr-class-4">
						<td id="td-id-4" class="td-class-4">
							<a href="https://github.com/wenzhixin/blog">blog</a>
						</td>
						<td>13</td>
						<td>4</td>
						<td>my blog</td>
					</tr>
					<tr id="tr-id-5" class="tr-class-5">
						<td id="td-id-5" class="td-class-5">
							<a href="https://github.com/wenzhixin/scutech-redmine">scutech-redmine</a>
						<td>6</td>
						<td>3</td>
						<td>Redmine notification tools for chrome extension.</td>
					</tr>
					</tbody>
				</table>

			</div>

			<!--通过data创建table-->
			<div class="doc-section">
				<h3 class="page-header">通过json创建table</h3>
				<table id="table-from-data">
					<thead>
					<tr>
						<th data-field="id">ID</th>
						<th data-field="name">Item Name</th>
						<th data-field="price">Item Price</th>
					</tr>
					</thead>
				</table>
			</div>


			<!--各式各样的table-->
			<div class="doc-section">
				<h3 class="page-header">综合table</h3>
				<div id="toolbar">
					<div class="form-inline" role="form">
						<div class="form-group">
							<span>Offset: </span>
							<input name="offset" class="form-control w70" type="number" value="0">
						</div>
						<div class="form-group">
							<span>Limit: </span>
							<input name="limit" class="form-control w70" type="number" value="5">
						</div>
						<div class="form-group">
							<input name="search" class="form-control" type="text" placeholder="Search">
						</div>
						<button id="ok" type="submit" class="btn btn-default">OK</button>
					</div>
				</div>

				<table id="toolbar-table"
					   data-toggle="table"
					   data-height="460"
					   data-url="data/data1.json"
					   data-toolbar="#toolbar"
					   data-click-to-select="true"
					   data-show-refresh="true"
					   data-show-toggle="true"
					   data-show-columns="true"
					   data-query-params="queryParams"
					   data-pagination="true"
					   data-page-size="5"
					   data-page-list="[5,8,10]"
					   data-pagination-first-text="First"
					   data-pagination-pre-text="上一页"
					   data-pagination-next-text="下一页"
					   data-pagination-last-text="Last"
					   data-detail-view="true"
					   data-detail-formatter="detailFormatter"
				>
					<thead>
					<tr>
						<th data-field="state" data-checkbox="true"
							data-formatter="stateFormatter"></th>
						<th data-field="id">ID</th>
						<th data-field="name">Item Name</th>
						<th data-field="price">Item Price</th>
					</tr>
					</thead>
				</table>
			</div>

		</div>
		<div class="col-md-3" role="complementary"></div>
	</div>
</div>
</body>
<jsp:include page="/static/commonviews/footer.jsp"/>
</html>
